<script type="text/x-template" id="template-main_home">
    <div class="template-home">
        <div class="cont_row">
            <div class="cont_box">
                <div class="ctu_title" style="border-bottom: 0;">
                    <h3>消息中心</h3>
                    <el-link type="primary" @click="window.parent.indexVue.openParentMenuInTitle('消息中心')">更多</el-link>
                </div>
                <el-table ref="multipleTable" height="340px" border :data="dataList" tooltip-effect="dark" style="padding:0 5px;">
                    <el-table-column label="消息内容" align="left" prop="messageContent" width="230" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作者" align="center" prop="operateName" width="110">
                    </el-table-column>
                    <el-table-column label="接收时间" align="center" prop="receivedDate">
                    </el-table-column>
                </el-table>
            </div>
            <div class="cont_box">
                <div class="ctu_title">
                    <h3>文档个数统计</h3>
                </div>
                <div id="echarts_count" style="width: 39vw;height:340px;"></div>
            </div>
        </div>
        <div class="cont_box">
            <div class="ctu_title">
                <h3>文档操作次数统计</h3>
            </div>
            <div style="margin: 20px 0 0 0;">
                <el-radio-group v-model="checkboxGroup1" @change="changeCheckboxGroup" style="padding: 0 0 0 20px;display: inline;">
                    <el-radio-button v-for="item in times" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                </el-radio-group>
                <el-date-picker
                        v-if="checkboxGroup1=='CUSTOM'"
                        v-model="dates"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :clearable="false"
                        @change="changeDatePicker($event, checkboxGroup1)"
                >
                </el-date-picker>
            </div>
            <div id="echarts_number" style="width: 79vw;height:340px;"></div>
        </div>
    </div>
</script>
<script>
    var MainMyHome = {
        template: '#template-main_home',
        data: function () {
            return {
                mananger: ms.manager,
                dataList: [],
                times: [
                    { label:'今天', key: 'TODAY' },
                    { label:'昨天', key: 'YESTERDAY'},
                    { label:'近三天', key: 'LAST3'},
                    { label:'近七天', key: 'LAST7'},
                    { label:'自定义', key: 'CUSTOM'}
                ],
                checkboxGroup1: 'TODAY',
                dates: [],
                total: 0,
                //总记录数量
                pageSize: 10,
                //页面数量
                currentPage: 1,
                //加载状态
                emptyText: '',
                //搜索表单
                form: {
                    createdDate: null
                }
            }
        },
        methods: {
            //消息中心
            getMessageList: function () {
                var that = this;
                // that.loading = true;
                // that.loadState = false;
                var page = {
                    pageNo: that.currentPage,
                    pageSize: that.pageSize
                };
                var form = JSON.parse(JSON.stringify(that.form));

                for (var key in form) {
                    if (!form[key]) {
                        delete form[key];
                    }
                }

                history.replaceState({
                    form: form,
                    page: page
                }, "");
                //筛选列表
                ms.http.get(ms.manager + "/dashboard/message/center/list.do", Object.assign({}, form, page),{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    if (!res.result || res.data && res.data.legend <= 0) {
                        that.emptyText = '暂无数据';
                        that.dataList = [];
                        that.total = 0;
                    } else {
                        that.emptyText = '';
                        // that.total = res.data.total;
                        that.dataList = res.data;
                    }
                }).finally(function () {
                    // that.loading = false;
                });
            },
            //文档数量统计
            getDocumentCount: function () {
                var that = this;
                ms.http.get(ms.manager + "/dashboard/statistics/document/count.do",{},{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    var datas1 = res.data?res.data.map(function (item) {
                        return {
                            name: item.name,
                            value: item.count
                        }
                    }):[];
                    that.echartsCount(datas1);
                }).finally(function () {
                    // that.loading = false;
                });
            },
            //文档操作次数统计
            getOperateCount: function (type, datas) {
                var that = this;
                var form = {
                    type: type,
                    beginDate: datas && datas.length>0?datas[0] + ' 00:00:00':'',
                    endDate: datas && datas.length>0?datas[1] + ' 23:59:59':''
                };
                ms.http.post(ms.manager + "/dashboard/statistics/operate/count.do",form,{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    var rdatas = res.data;
                    var typeData = [{label:'预览', key: 'view'}, {label:'分享', key: 'share'}, {label: '下载', key: 'download'}, {label: '删除', key: 'delete'}];
                    var legendData = typeData.map( function(v) {return v.label});
                    var xAxisData = [];
                    var echartDatas = [];
                    var datas = [];
                    // var keys = 'name';
                    // var obj = {};
                    // var pointsd = [...rdatas.view, ...rdatas.share, ...rdatas.download, ...rdatas.delete];
                    // xAxisData = pointsd.reduce( function(cur,next) {
                    //         obj[next[keys]] ? "" : obj[next[keys]] = true && cur.push(next);
                    //     return cur;
                    // },[]).map(function(v) {return v[keys]});
                    // xAxisData.sort(this.sortDownDate); //时间排序

                    // for (var i in typeData) {
                    //     echartDatas.push({
                    //         key: typeData[i].key,
                    //         label: typeData[i].label,
                    //         datas: []
                    //     });
                    //     for (var ii in xAxisData) {
                    //         var countObj = rdatas[typeData[i].key].find(obj=> {return obj.name === xAxisData[ii]});
                    //         echartDatas[i].datas.push({
                    //             name: xAxisData[ii],
                    //             count: countObj ? countObj.count: 0
                    //         })
                    //     }
                    // }
                    for(var rkey in rdatas){
                        var keyObj = typeData.find( function (obj){return obj.key === rkey});
                        echartDatas.push({
                            key: rkey,
                            label: keyObj ? keyObj.label: null,
                            datas: rdatas[rkey]
                        });
                        if(rkey===typeData[0].key) {
                            xAxisData = rdatas[rkey].map( function(v) {return v.name});
                        }
                    }
                    // console.log(xAxisData, echartDatas)

                    for (var j in echartDatas) {
                        datas.push({
                            name: echartDatas[j].label,
                            type: 'line',
                            data: echartDatas[j].datas.map(function(v) { return v.count })
                        })
                    }
                    // console.log(legendData, xAxisData, datas)
                    if(datas.length>0) that.echartsNumber(legendData, xAxisData, datas)
                }).finally(function () {
                    // that.loading = false;
                });
            },
            echartsCount: function (datas) {
                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('echarts_count'));
                var color1 = ['#00a2ff', '#00cece', '#00ce7a', '#ffd136', '#ff5873', '#a05de2'];
                var echartData = datas;
                // 指定图表的配置项和数据
                var option1 = {
                    color: color1,
                    tooltip: {},
                    legend: {
                        show: true,
                        type: 'scroll',
                        icon: 'circle',
                        orient: 'vertical', // horizontal水平 vertical垂直
                        right: '10%',
                        top: '20%' ,
                        bottom: '20%' ,
                        formatter: function(name) {
                            for (var i = 0, l = echartData.length; i < l; i++) {
                                var label = name.length > 8 ? name.substring(0, 4) + '...' : name;
                                if (echartData[i].name == name) {
                                    return label + "  " + echartData[i].value + '个';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        radius: ['48%', '62%'],
                        center: ['34%', '50%'],
                        data: echartData,
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 2
                            }
                        }
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。

                this.$nextTick(function () {
                    myChart1.setOption(option1);
                    myChart1.resize();
                });
                window.addEventListener("resize", function () {
                    myChart1.resize();
                });
            },
            echartsNumber: function (legendData, xAxisData, datas) {
                // 基于准备好的dom，初始化echarts实例
                var myChart2 = echarts.init(document.getElementById('echarts_number'));
                var color2 = ['#00a2ff', '#ff3458', '#00ce7a', '#ffd136', '#00FFFF', '#4AEAB0'];
                // 指定图表的配置项和数据
                var option2 = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    color: color2,
                    legend: {
                        type: 'plain',
                        icon: 'circle',
                        right: 40,
                        top: 0,
                        data: legendData//,
                        // selected: {
                        //     '预览' : false
                        // }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        y2: 20,
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisData,
                        axisLabel: {
                            color: "#000"
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#dededd",
                                type: 'dashed'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            color: "#000",
                            formatter: function(value) {
                                return value + '次';
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#dededd"
                            }
                        }
                    },
                    series: datas
                };

                // 使用刚指定的配置项和数据显示图表。
                this.$nextTick(function () {
                    myChart2.setOption(option2);
                    myChart2.resize();
                });
                window.addEventListener("resize", function () {
                    myChart2.resize();
                });
            },
            changeCheckboxGroup: function(value) {
                this.dates = [];
                if(value!=='CUSTOM') {
                    this.getOperateCount(value, this.dates);
                }
            },
            changeDatePicker: function(value, type) {
                var timeDatas = value ? value:[];
                this.getOperateCount(type, timeDatas);
            },
            // 今天this.getDay(0)，// 昨天this.getDay(-1)，// 近三天this.getDay(-3)，// 近七天this.getDay(-7)
            getDay: function (day){
                var today = new Date();
                var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
                today.setTime(targetday_milliseconds); //注意，这行是关键代码
                var tYear = today.getFullYear();
                var tMonth = today.getMonth();
                var tDate = today.getDate();
                tMonth = this.doHandleMonth(tMonth + 1);
                tDate = this.doHandleMonth(tDate);
                return tYear+"-"+tMonth+"-"+tDate;
            },
            doHandleMonth: function (month){
                var m = month;
                if(month.toString().length == 1){
                    m = "0" + month;
                }
                return m;
            },
            sortDownDate: function (a, b) {
                return Date.parse(a) - Date.parse(b);
            }
        },
        mounted: function () {
            this.getMessageList();
            this.getDocumentCount();
            this.changeCheckboxGroup(this.checkboxGroup1);
        }
    }
</script>
<style>
    .ctu_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding: 0 10px;
        border-bottom: 1px #ebeef5 solid;
    }
    .cont_row {
        display: flex;
        justify-content: space-between;
    }
    .cont_box {
        flex: 1;
        margin-right: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        background-color: #fff;
    }
    .el-date-editor .el-range-separator {
        padding: inherit;
        width: auto;
    }
</style>